<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>龙门石窟 - 世界文化遗产</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "微软雅黑", "PingFang SC", sans-serif;
        }

        html{
            scroll-behavior: smooth; /* 平滑滚动 */
        }
        
        body {
            line-height: 1.6;
            color: #333;
        }
        
        /* 导航栏 */
        .navbar {
            padding: 15px 50px;
            background: rgba(30, 30, 30, 0.9);
            color: white;
            display: flex;
            justify-content: space-between;
            /*将子元素均匀分布在容器中*/
            align-items: center;
            /*子元素在垂直方向上居中对齐*/
            position: fixed;
            /*固定在页面顶部*/
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }
        
        .navbar.scrolled {
            padding: 10px 50px;
            background: rgba(30, 30, 30, 0.95);
        }
        
        .logo {
            font-size: 1.5em;
            font-weight: bold;
        }
        
        .nav-links {
            display: flex;
            /*使用flex布局*/
            /*水平导航栏*/
            list-style: none;
            /*去掉列表项的默认样式*/
        }
        
        .nav-links li {
            margin-left: 30px;
            /*列表项之间的间距*/
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            /*去掉链接的下划线*/
            font-size: 1.1em;
            transition: color 0.3s;
            /*链接颜色变化的过渡效果*/
        }
        
        .nav-links a:hover {
            color: #ffd700;
        }
        
        /* hero区域 */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                        url('./img/龙门石窟.jpg') center/cover;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
            background-attachment: fixed;
            padding-top: 70px; /* 为固定导航栏留出空间 */
        }
        
        .hero-content {
            max-width: 800px;
            padding: 0 20px;
        }
        
        .hero h1 {
            font-size: 3em;
            margin-bottom: 20px;
        }
        
        .hero p {
            font-size: 1.5em;
        }
        
        /* 按钮样式 */
        .cta-btn {
            display: inline-block;
            padding: 15px 30px;
            font-size: 1.2em;
            background: #ffd700;
            color: #333;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            /*鼠标悬停时显示手型*/
            margin-top: 20px;
            text-decoration: none;
            /*去掉链接的下划线*/
            font-weight: bold;
            transition: all 0.3s;
            /*按钮的过渡效果*/
        }
        
        .cta-btn:hover {
            background: #e6c200;
            transform: translateY(-2px);
            /*鼠标悬停时按钮上移*/
        }
        
        /* 洞窟展示区域 */
        .cave-section {
            padding: 100px 50px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
            background: white;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 50px;
            font-size: 2.5em;
            color: #333;
            grid-column: 1 / -1;
        }
        
        .cave-card {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
            background: white;
        }
        
        .cave-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .cave-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            margin-bottom: 15px;
            border-radius: 5px;
        }
        
        .cave-card h3 {
            margin-bottom: 15px;
            color: #444;
        }
        
        /* 参观指南区域 */
        .visit-guide {
            padding: 100px 50px;
            background: #f5f5f5;
        }
        
        .visit-guide h2 {
            text-align: center;
            margin-bottom: 50px;
            font-size: 2.5em;
            color: #333;
        }
        
        .info-box {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .info-box p {
            margin-bottom: 20px;
            font-size: 1.1em;
        }
        
        .info-box a {
            color: #4a6fa5;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .info-box a:hover {
            color: #2c4a7a;
            text-decoration: underline;
        }
        .intro-section {
            padding: 100px 50px;
            background: white;
            text-align: center;
        }
        
        .intro-section h2 {
            font-size: 2.5em;
            margin-bottom: 30px;
            color: #333;
            text-align: center;
        }
        
        .intro-content {
            max-width: 1000px;
            margin: 0 auto;
            font-size: 1.1em;
            text-align: left;
        }
        .intro-content img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
        }

        .intro-text h3 {
            font-size: 1.5em;
            margin-bottom: 15px;
            color: #444;
        }

        .intro-text p {
            margin-bottom: 20px;
            line-height: 1.8;
        }

        
        /* 通用区块样式 */
        .section {
            padding: 80px 20px;
            text-align: center;
        }
        /* 页脚 */
        footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }
        

        
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar" id="navbar">
        <div class="logo">龙门石窟</div>
        <ul class="nav-links">
            <li><a href="#home">首页</a></li>
            <li><a href="#intro">简介</a></li>
            <li><a href="#caves">经典洞窟</a></li>
            <li><a href="#visit">参观指南</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>

    <!--首页-->
    <section id="home" class="hero">
        <div class="hero-content">
            <h1>世界文化遗产·龙门石窟</h1>
            <p>跨越千年的艺术瑰宝</p>
            <a href="#caves" class="cta-btn">探索洞窟</a>
            <!--cat 号召行动-->
        </div>
    </section>

    <!-- 龙门石窟简介 -->
    <section id="intro" class="intro-section">
        <div class="intro-content">
            <h2>龙门石窟简介</h2>
            <img src="./img/龙门石窟1.jpg" alt="龙门石窟">
            <div class="intro-text">
                <h3>历史背景</h3>
                <p>龙门石窟位于河南省洛阳市南郊的龙门山和香山崖壁上，是中国四大石窟之一，也是世界文化遗产。开凿于北魏孝文帝年间，历经东魏、西魏、北齐、隋、唐、五代、宋等朝代连续大规模营造达400余年之久。</p>

                <h3>艺术价值</h3>
                <p>龙门石窟现存窟龛2345个，造像10万余尊，碑刻题记2800余品。其艺术风格既继承了秦汉以来的艺术传统，又吸收了外来艺术的精华，形成了具有中国特色的艺术风格。</p>

                <h3>文化意义</h3>
                <p>1961年，龙门石窟被国务院公布为第一批全国重点文物保护单位；2000年，被联合国教科文组织列为世界文化遗产。龙门石窟不仅是中国石窟艺术的瑰宝，也是研究中国历史、文化、艺术、宗教的重要实物资料。</p>
            </div>
        </div>
    </section>

    <!-- 洞窟展示区域 -->
    <section id="caves" class="cave-section">
        <h2 class="section-title">经典洞窟</h2>
        
        <div class="cave-card">
            <img src="./img/龙门石窟.jpg" alt="奉先寺">
            <h3>奉先寺</h3>
            <p>龙门石窟规模最大,艺术最为精湛的摩崖群雕，主尊卢舍那大佛是龙门石窟的标志性造像。</p>
            <a href="#" class="cta-btn">了解更多</a>
        </div>
        
        <div class="cave-card">
            <img src="./img/宾阳洞.jpg" alt="宾阳洞">
            <h3>宾阳洞</h3>
            <p>北魏时期代表性洞窟，以其精美的浮雕和壁画闻名，展现了北魏皇家石窟的独特的艺术风格。</p>
            <a href="#" class="cta-btn">了解更多</a>
        </div>
        
        <div class="cave-card">
            <img src="./img/万佛洞.jpg" alt="万佛洞">
            <h3>万佛洞</h3>
            <p>万佛洞因洞内南北两壁刻有15000尊小佛像而得名，万佛洞是唐代佛教艺术的杰出代表。</p>
            <a href="#" class="cta-btn">了解更多</a>
        </div>
    </section>

    <!-- 参观指南 -->
    <section id="visit" class="visit-guide">
        <h2>参观指南</h2>
        <div class="info-box">
            <p><strong>开放时间：</strong> 08:00-18:00（旺季，4月1日-10月31日）</p>
            <p><strong>淡季时间：</strong> 08:00-17:00（11月1日-3月31日）</p>
            <p><strong>门票价格：</strong> 90元/人（旺季），80元/人（淡季）</p>
            <p><strong>门票预约：</strong> <a href="https://www.longmen.gov.cn" target="_blank">官方网站预约</a></p>
            <p><strong>交通指南：</strong> 
                可乘坐公交车53路、60路、81路、99路到达龙门石窟站，或自驾前往。
            </p>
            <p><strong>注意事项：</strong> 
                请勿触摸石窟造像，禁止使用闪光灯拍照，保持景区环境卫生。
            </p>
        </div>
    </section>


    <!-- 联系我们 -->
    <section id="contact" class="section">
        <h2>联系我们</h2>
        <p>电话：123-456-7890</p>
        <p>邮箱：info@longmenshiku.com</p>
    </section>

    <!-- 页脚 -->
    <footer>
        <p>© 2025 龙门石窟风景区 版权所有 | 豫ICP备12345678号</p>
        <br>
        <p>© 2025 软件工程张诗佳 版权所有 | 2410250403</p>
    </footer>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });
        
        
    </script>
</body>
</html>